<!--
 * @Date: 2022-08-25 14:05:59
 * * @LastEditors: StavinLi 495727881@qq.com
 * @LastEditTime: 2023-03-15 14:59:19
 * @FilePath: /Workflow-Vue3/src/components/dialog/roleDialog.vue
-->
<template>
  <el-dialog
    title="选择角色"
    v-model="visibleDialog"
    :width="600"
    append-to-body
    class="promoter_person"
  >
    <div class="person_body clear">
      <div class="person_tree l">
        <input
          type="text"
          placeholder="搜索角色"
          v-model="searchVal"
          @input="getDebounceData($event, 2)"
        />
        <selectBox :list="list" />
      </div>
      <selectResult :total="total" @del="delList" :list="resList" />
    </div>
    <template #footer>
      <el-button @click="closeDialog">取 消</el-button>
      <el-button type="primary" @click="saveDialog">确 定</el-button>
    </template>
  </el-dialog>
</template>
<script setup>
import selectBox from '../selectBox.vue'
import selectResult from '../selectResult.vue'
import { computed, watch, ref, inject } from 'vue'
import $func from '../utils/index.js'
import { createCommonDataManager } from './common'

// 注入FlowDesigner提供的状态和API配置
const { apiConfig } = inject('flowDesignerState')

// 创建数据管理器
const { roles, getDebounceData, getRoleList, searchVal } = createCommonDataManager(apiConfig)
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  data: {
    type: Array,
    default: () => [],
  },
})
const checkedRoleList = ref([])
const emits = defineEmits(['update:visible', 'change'])
const list = computed(() => {
  return [
    {
      type: 'role',
      not: true,
      data: roles.value,
      isActive: (item) => $func.toggleClass(checkedRoleList.value, item, 'roleId'),
      change: (item) => {
        checkedRoleList.value = [item]
      },
    },
  ]
})
const resList = computed(() => {
  return [
    {
      type: 'role',
      data: checkedRoleList.value,
      cancel: (item) => $func.removeEle(checkedRoleList.value, item, 'roleId'),
    },
  ]
})
const visibleDialog = computed({
  get() {
    return props.visible
  },
  set(val) {
    closeDialog()
  },
})
watch(
  () => props.visible,
  (val) => {
    if (val) {
      getRoleList()
      searchVal.value = ''
      checkedRoleList.value = props.data.map(({ name, targetId }) => ({
        roleName: name,
        roleId: targetId,
      }))
    }
  },
)
const total = computed(() => checkedRoleList.value.length)
const saveDialog = () => {
  const checkedList = checkedRoleList.value.map((item) => ({
    type: 2,
    targetId: item.roleId,
    name: item.roleName,
  }))
  emits('change', checkedList)
}
const delList = () => {
  checkedRoleList.value = []
}

const closeDialog = () => {
  emits('update:visible', false)
}
</script>

<style>
@import '../css/dialog.css';
</style>
